<template>
    <div class="goods" v-if="product">
        <div class="goods-box">
            <div class="img">
                <img :src="product.size[index].img" alt="">
            </div>
            <div class="goods-price-msg course-wrap">
                <div class="price">
                    <span class="price-jp">{{product.size[index].jumei_price | setMoneySign}}<van-tag round color="#fe4070">包邮</van-tag></span>
                    <span class="price-del">{{product.group_single_price}}</span>
                </div>
                <div class="tuan_number">{{product.buyer_number_text}}</div>
                <van-divider />
                <div class="end-time _style-fs12"><div class="end-time _style-fs12">还剩 <van-count-down :time="time" /></div>
                </div>
                <div class="refund_msg">逾期未成团自动退款 </div>
            </div>
        </div> <!--商品图片信息-->
        <div class="goods-msg course-wrap van-multi-ellipsis--l2">
            <span class="goods-num red">{{product.recommend_data[index].group_name_tag}}</span>{{product.share_info[index].text | removeUrl}}
        </div> <!--商品文字信息和价格-->
        <div class="ruleWrap course-wrap">
            <h3 class="course-title">拼团玩法 <a class="course-rule" href="/yiqituan/rules?type=">查看规则<van-icon name="arrow" /></a></h3>
            <h3 class="course-wrap">
                <div class="course-item  course-itemon"><span>支付 <br>开团/参团</span><van-icon name="arrow"/></div>
                <div class="course-item "><span>邀请 <br>好友参团</span><van-icon name="arrow"/></div>
                <div class="course-item "><span>拼团成功立即发货 <br>逾期未成团自动退款</span><van-icon name="arrow"/></div>
            </h3>
            <div class="friends_group" v-show="false">
                <h4 class="course-title">以下小伙伴已发起拼团，您可直接参加</h4>
            </div>
        </div> <!--拼团规则-->
        <div class="wx-fuwu course-wrap">
            <div class="jm-fuwu">
                <div class="fwh-icon">
                    <img src="http://a4.jmstatic.com/3917f15b23ae1ca0/logowxffh.png" alt="聚美官方服务号">
                </div>
                <div class="fwh-text">
                    <div class="fwh-title">聚美官方服务号</div>
                    <div class="fwh-words words-small">更多靠谱优惠推荐，尽在聚美微信服务号</div>
                </div>
            </div>
            <div class="jm-fllow">
                <div class="fwh-btn"><van-button round size="mini" color="#fe4070">点击关注</van-button></div>
                <div class="fwh-fllow words-small">或 微信搜索“聚美优品jumei”关注</div>
            </div>
        </div> <!--美团官方服务号-->
        <div class="choice-model course-wrap">
            <h3 class="course-title">选择型号</h3>
            <div class="model-list">
                <van-button v-for="(item, ind) in product.size" @click="chosceModel(ind)"  round size="mini" color="#fe4070" :key="item.sku">{{item.size}}</van-button>
            </div>
        </div><!--选择需要购买的型号-->
        <div class="select-site">
            <van-cell is-link @click="selectSite">
                <!-- 使用 title 插槽来自定义标题 -->
                <template slot="title">
                    <div class="custom-title"><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></div>
                </template>
            </van-cell>
        </div> <!--配送位置-->
        <van-popup
            v-model="selectSiteShow"
            get-container="#app"
            round
            position="bottom"
            closeable
            :style="{ height: '70%' }"
            class="select-site-model"
        >
            <div class="site_map">
                <h3 class="course-title">配送至</h3>
                <ul class="site_map_list">
                    <li class=""><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></li>
                    <li><span class="label">配送</span> <span class="address">至 <van-icon name="location-o" color="#fe4070"/>{{product.default_address.structured_address}}</span></li>
                </ul>
            </div>

        </van-popup> <!--选择配送位置弹出-->
        <div class="buyComment" >
           <comment-list :verify_code="product.verify_code" :product_id="product.product_id"/> <!--评论-->
        </div>
        <div class="tuwen">
            <tuwen-list :verify_code="product.verify_code" :product_id="product.product_id"/>
        </div>
        <div class="detailPop">店铺名信息</div>
        <div class="tlistWrap">
            <recommend-list></recommend-list>
        </div>
        <div class="btnWrap">
            <van-tabbar>
                <van-tabbar-item>
                    <button @click="$router.push('/home')" class="back-btn">首页</button>
                </van-tabbar-item>
                <van-tabbar-item>
                    <button @click="handleBuy('alone')" class="buy-alone-btn buy-btn" v-html="product.bottom_button.action_text"/>
                </van-tabbar-item>
                <van-tabbar-item>
                    <button @click="handleBuy('tuan')" class="buy-tuan-btn buy-btn" v-html="product.bottom_button.display_text"/>
                </van-tabbar-item>
            </van-tabbar>
        </div>
        <div class="goto_top">返回顶部</div>
    </div>
</template>
<script>
import commentList from './components/comment-list'
import recommendList from './components/recommend-list'
import tuwenList from './components/tuwen-list'
export default {
    name: "index",
    // beforeRouteEnter (to, from, next) {
    //     store.commit('hide')
    //     next()
    // },
    // beforeRouteLeave (to, from, next) {
    //     store.commit('show')
    //     next()
    // },
    data() {
        return {
            product: null, // 用户异步请求的真实数据
            selectSiteShow: false, // 配送地址选择弹出框状态
            url: '', // 本页面数据请求的url
            time: [], // 团结束事件
            index: 0, // 用户选中的size
            commentList: null, // 评论数据
            remain_time: 0 // 倒计时时间
        }
    },
    methods: {
        getList () { // 根据传参异步获取数据
            this.axios({
                method: 'get',
                url: this.url, // 请求路径由当前网页路径决定
                params: this.$route.query // 参数由上一级网页传过来
            })
                .then(res => {
                    this.product = res.data.data
                    this.time = this.product.remain_time * 1000
                })
                .catch(err => console.log(err))
        }, // 请求当前页面商品数据
        chosceModel(index){
            this.index = index
        }, // 用户点击切换型号
        selectSite(){
            this.selectSiteShow = true
        }, // 选择配送地址
        handleBuy(arg) {
            console.log(arg)
        }, // buy-button
    },
    mounted() {
        this.$store.commit('hide') // 隐藏底部tabbar
        console.log((this.$route.query))
        if (this.$route.path.includes('yiqituan')) {  // 判断是否事一起团过来的 如果是 执行对应的
            // console.log(this.$route.path.includes('yiqituan'))
            this.url = '/api2/yiqituan/ajaxDetail'
        }
        if (this.$route.path.includes('product')) {  // 判断是否事一起团过来的 如果是 执行对应的
            // console.log(this.$route.path.includes('yiqituan'))
            this.url = '/api1/product/ajaxStaticDetail'
        }
        this.getList()
    },
    filters: {
        removeUrl (text) {
            if (text.includes('http')) {
                return text.replace(/http.+/g, '')
            } else {
                return text
            }
        } // 移除商品描述中的链接
    },
    components: {
        commentList,
        tuwenList,
        recommendList
    },
    destroyed () {
        this.$store.commit('show') // 显示底部tabbar
    },
}
</script>

<style scoped lang="scss">
img{
    display: block;
}
.goods{
    &>div{
        margin-bottom: 3vw;
    }
}
.course-wrap{
    font-size: 4.4vw;
    padding: 3vw;
    color: $color-v3;
    background-color: #fff;
    .course-title{
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        .course-rule{
            font-size: 3.5vw;
            color: $color-v3;
        }
    }
    .course-wrap{
        font-size: 4.1vw;
        padding: 3vw 0;
        display: flex;
        justify-content: space-between;
        .course-item{
            display: flex;
            align-items: center;
            text-align: center;
            line-height: 5.5vw;
            .van-icon{
                font-size: 6vw;
                color: $color-v3;
            }
        }
        .course-itemon{
            color: $e-red;
            .van-icon{
                color: $e-red;
            }
        }
    }
}
.goods-box{
    .img{
        width: 100vw;
        img{
            width: 100%;
        }
    }
    .goods-price-msg{
        overflow: hidden;
        width: 100vw;
        box-sizing: border-box;
       display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: baseline;
        color: $color-v3;
        font-size: 4.4vw;
        background-color: #ffffff;
        .van-divider{
            width: 100%;
        }
        .price{
            &-jp{
                color: $e-red;
            }
        }
        .tuan_number{
            text-align: right;
        }
        .refund_msg{
            text-align: right;
        }
    }
    .end-time{
        display: flex;
    }
}
.goods-msg{
    background-color: #ffffff;
    color: $color-v2;
}
.ruleWrap{
    color: $color-v2;

}
.wx-fuwu{
    &>div{
        margin-top: 3vw;
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        &>div{
            margin-right: 3.2vw;
        }
    }
    .jm-fuwu{
        .fwh-icon{
            width: 15.6vw;
            height: 15.6vw;
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .words-small{
        font-size: 4vw;
    }
}
.choice-model{
    .model-list{
        display: flex;
        flex-wrap: wrap;
        padding: 3vw 0;
        .van-button{
            margin: 1vw 2vw;
        }
    }
}
.select-site{
    .label{
        display: inline-block;
        width: 15.6vw;
    }
    .address{
        font-size: 3.8vw;
    }
}
.select-site-model{
    .course-title{
        text-align: center;
        margin: 6.2vw 0 2.5vw;
        color: $color-v3;
    }
}
.buyComment{
    background-color: #ffffff;

}
.btnWrap{
    .van-tabbar{
    }
    .back-btn{
        float: left;
        background-color: #ffffff;
        height: 35px;
        width: 35px;
        border: 1px solid $color-v4;
        border-radius: 50%;
        text-align: center;
        line-height: 35px;
        color: $color-v3;
        @extend ._style-fs11
    }
    .buy-btn{
        width: 100px;
        height: 35px;
        border-radius: 35px;
        border: 1px solid $e-red;
        text-align: center;
        background-color: #ffffff;
        color: $color-v2;
    }
    .buy-tuan-btn{
        background-color: $e-red;
        color: #fff;
    }
    .buy-alone-btn{
        background-color: #ffd8e5;
        color: $e-red;
    }
}
</style>
